<template>
  <div class="group-buy-detail">
    <div v-if="service" class="detail-content">
      <div class="header">
        <div class="cover-image">
          <img :src="service.imageUrl" :alt="service.name">
        </div>
        <div class="service-info">
          <h1>{{ service.name }}</h1>
          <div class="meta-info">
            <span class="city">{{ service.city }}</span>
            <span class="type">{{ service.type }}</span>
          </div>
          <div class="rating" v-if="service.averageRating">
            <el-rate v-model="service.averageRating" disabled show-score />
            <span class="comment-count">({{ service.commentCount }}条评价)</span>
          </div>
          <div class="price-section">
            <div class="price">¥{{ service.price }}</div>
            <el-button type="primary" size="large">立即预订</el-button>
          </div>
        </div>
      </div>

      <div class="description-section">
        <h2>服务描述</h2>
        <p>{{ service.description }}</p>
      </div>

      <div class="details-section">
        <h2>详细信息</h2>
        <div class="info-item">
          <span class="label">地址</span>
          <span class="value">{{ service.address }}</span>
        </div>
        <div class="info-item">
          <span class="label">联系方式</span>
          <span class="value">{{ service.contactInfo }}</span>
        </div>
        <div class="info-item">
          <span class="label">服务详情</span>
          <span class="value">{{ service.details }}</span>
        </div>
      </div>

      <div class="comments-section">
        <h2>用户评价 ({{ comments.length }})</h2>
        <CommentForm
          v-if="service"
          :target-id="service.id"
          target-type="SERVICE"
          @success="fetchComments"
        />
        <div class="comment-list">
          <div v-for="comment in comments" :key="comment.id" class="comment-item">
            <div class="comment-header">
              <el-avatar :src="comment.user.avatar" :size="40">
                {{ comment.user.nickname.charAt(0) }}
              </el-avatar>
              <div class="comment-info">
                <span class="nickname">{{ comment.user.nickname }}</span>
                <el-rate v-model="comment.rating" disabled />
              </div>
            </div>
            <p class="comment-content">{{ comment.content }}</p>
            <span class="comment-time">{{ formatDate(comment.createdTime) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useGroupBuyDetail } from '@/ts/pages/group-buy-detail'
import CommentForm from '@/components/common/CommentForm.vue'
import '@/css/pages/group-buy-detail.css'

const { service, comments, formatDate, fetchComments } = useGroupBuyDetail()
</script> 